<template>
  <div class="app">
    <!-- 顶部搜索栏 -->
    <div class="search-bar">
      <div class="search-input">
        <img src="~@/assets/search.png" alt="搜索" class="search-icon">
        <input type="text" placeholder="关键词搜索物品" v-model="searchKeyword">
      </div>
      <button class="search-btn">搜索</button>
      <button class="qr-btn" @click="showQRModal">扫二维码</button>
    </div>

    <!-- 轮播图区域 -->
    <div class="carousel">
      <img src="~@/assets/banner.jpg" alt="一站式换装修" class="carousel-img">
      <div class="carousel-dots">
        <span v-for="(dot, index) in 5" :key="index" :class="{'active': index === currentDot}" @click="changeDot(index)"></span>
      </div>
    </div>

    <!-- 功能模块区域 -->
    <div class="module-section">
      <div class="module-item">
        <img src="~@/assets/qrCode.png" alt="易货码" class="module-icon">
        <p>易货码</p>
      </div>
      <div class="module-item">
        <img src="~@/assets/recommend.png" alt="推荐码" class="module-icon">
        <p>推荐码</p>
      </div>
      <div class="module-item">
        <img src="~@/assets/store.png" alt="门店入驻" class="module-icon">
        <p>门店入驻</p>
      </div>
    </div>

    <!-- 用户标签区域 -->
    <div class="tag-section">
      <div class="tag-item">
        <img src="~@/assets/client.png" alt="大客户" class="tag-icon">
        <p>大客户</p>
      </div>
      <div class="tag-item">
        <img src="~@/assets/creator.png" alt="创客会员" class="tag-icon">
        <p>创客会员</p>
      </div>
      <div class="tag-item">
        <img src="~@/assets/team.png" alt="我的团队" class="tag-icon">
        <p>我的团队</p>
      </div>
      <div class="tag-item">
        <img src="~@/assets/gift.png" alt="免费领取" class="tag-icon">
        <p>免费领取</p>
      </div>
    </div>

    <!-- 商品分类区域 -->
    <div class="category-section">
      <div class="category-item">
        <img src="~@/assets/travel.png" alt="度假旅游" class="category-icon">
        <p>度假旅游</p>
      </div>
      <div class="category-item">
        <img src="~@/assets/entertainment.png" alt="休闲娱乐" class="category-icon">
        <p>休闲娱乐</p>
      </div>
      <div class="category-item">
        <img src="~@/assets/grocery.png" alt="食品生鲜" class="category-icon">
        <p>食品生鲜</p>
      </div>
      <div class="category-item">
        <img src="~@/assets/household.png" alt="日用百货" class="category-icon">
        <p>日用百货</p>
      </div>
      <div class="category-item">
        <img src="~@/assets/appliance.png" alt="家用电器" class="category-icon">
        <p>家用电器</p>
      </div>
    </div>

    <!-- 更多商品分类区域 -->
    <div class="category-section">
      <div class="category-item">
        <img src="~@/assets/education.png" alt="教育培训" class="category-icon">
        <p>教育培训</p>
      </div>
      <div class="category-item">
        <img src="~@/assets/car.png" alt="汽车服务" class="category-icon">
        <p>汽车服务</p>
      </div>
      <div class="category-item">
        <img src="~@/assets/recycle.png" alt="以旧换新" class="category-icon">
        <p>以旧换新</p>
      </div>
      <div class="category-item">
        <img src="~@/assets/secondhand.png" alt="闲置二手" class="category-icon">
        <p>闲置二手</p>
      </div>
      <div class="category-item">
        <img src="~@/assets/more.png" alt="更多商品" class="category-icon">
        <p>更多商品</p>
      </div>
    </div>

    <!-- 扫二维码弹窗（默认隐藏） -->
    <div class="qr-modal" v-if="isQRModalVisible">
      <div class="qr-modal-content">
        <img src="~@/assets/qrCode.png" alt="二维码" class="qr-code">
        <p>扫描二维码</p>
        <button @click="closeQRModal">关闭</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '', // 搜索栏输入值
      currentDot: 0, // 轮播图当前显示的点
      isQRModalVisible: false, // 扫二维码弹窗显示状态
    };
  },
  methods: {
    // 切换轮播图点位
    changeDot(index) {
      this.currentDot = index;
    },
    // 显示扫二维码弹窗
    showQRModal() {
      this.isQRModalVisible = true;
    },
    // 关闭扫二维码弹窗
    closeQRModal() {
      this.isQRModalVisible = false;
    },
  },
};
</script>

<style scoped>
/* 全局样式 */
.app {
  background-color: #fff;
  font-family: Arial, sans-serif;
}

/* 顶部搜索栏 */
.search-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
}

.search-input {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 20px;
  padding: 5px 10px;
}

.search-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.search-btn {
  background-color: #fff;
  color: #007bff;
  border: none;
  border-radius: 20px;
  padding: 5px 10px;
  margin-left: 10px;
  cursor: pointer;
}

.qr-btn {
  background-color: #fff;
  color: #007bff;
  border: none;
  border-radius: 20px;
  padding: 5px 10px;
  cursor: pointer;
}

/* 轮播图区域 */
.carousel {
  position: relative;
  margin: 20px 0;
}

.carousel-img {
  width: 100%;
  height: 200px;
  border-radius: 10px;
}

.carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  width: 150px;
}

.carousel-dots span {
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
}

.carousel-dots span.active {
  background-color: #007bff;
}

/* 功能模块区域 */
.module-section {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
}

.module-item {
  text-align: center;
}

.module-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

/* 用户标签区域 */
.tag-section {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
}

.tag-item {
  text-align: center;
}

.tag-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
}

/* 商品分类区域 */
.category-section {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
}

.category-item {
  text-align: center;
}

.category-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

/* 扫二维码弹窗 */
.q
